<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getPlayList"
    >
      <van-card v-for="item in playList" :key="item.id">
        <template #thumb>
          <img :src="item.coverImgUrl" class="imeag" />
        </template>
        <template #tags>
          <div
            slot="title"
            class="van-card__titlee"
            v-html="highlight(item.name)"
          ></div>
          <div class="van-card__descc">
            <span
              slot="title"
              v-html="highlight(item.trackCount + '首音乐')"
            ></span>
            <span
              slot="title"
              v-html="highlight('by ' + item.creator.nickname)"
            ></span>
            <span>播放{{ item.playCount | capitalize }}次</span>
          </div>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getPlayList } from '@/api/SongSearch'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      playList: [],
      type: 1000,
      limit: 10,
      offset: 1,
      loading: false,
      finished: false
    }
  },
  created () {},
  mounted () {},
  methods: {
    async getPlayList () {
      try {
        const {
          result: { playlists }
        } = await getPlayList({
          keywords: this.keywords,
          type: this.type,
          limit: this.limit,
          offset: (this.offset - 1) * this.limit
        })
        this.playList.push(...playlists)
        const obj = {}
        this.playList = this.playList.reduce((cur, next) => {
          if (!obj[next.id]) {
            obj[next.id] = true && cur.push(next)
          }
          return cur
        }, [])
        this.loading = false
        if (playlists.length) {
          this.offset++
        } else {
          this.finished = true
        }
      } catch (error) {}
    },
    // 高亮
    highlight (text) {
      const regExp = new RegExp(this.keywords, 'gi')
      const highlightStr = `<span class="active">${this.keywords}</span>`
      return text.replace(regExp, highlightStr)
    }
  },
  //   过滤播放次数
  filters: {
    capitalize: function (value) {
      if (value > 10000000) {
        return (value / 100000000).toFixed(1) + '亿'
      } else if (value > 100000) {
        return (value / 10000).toFixed(1) + '万'
      } else {
        return value
      }
    }
  }
}
</script>

<style scoped lang="less">
.van-card {
  background: #fff;
}
/deep/.van-card__titlee {
  margin-top: 15px !important;
  font-size: 30px !important;
}
.van-card__descc {
  margin-top: 15px;
  color: #909090;
}
.imeag {
  width: 150px;
  height: 150px;
}
/deep/.van-card__thumb img {
  background: #fff !important;
  width: 85%;
  height: 85%;
}
.van-card__thumb {
  width: 150px;
  height: 150px;
  margin-right: 0;
}
.van-card__content {
  width: 150px;
}
.van-card {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.van-card__header {
  height: 150px;
}
</style>
